/* @tailwind base; */

.btn-primary{
  border-radius:  0.5rem;
  --tw-bg-opacity:  1;
  background-color:  rgb(59 130 246 / var(--tw-bg-opacity));
  padding-top:  0.5rem;
  padding-bottom:  0.5rem;
  padding-left:  1rem;
  padding-right:  1rem;
  font-weight:  600;
  --tw-text-opacity:  1;
  color:  rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:  0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-primary:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(29 78 216 / var(--tw-bg-opacity));
}

.btn-primary:focus{
  outline:  2px solid transparent;
  outline-offset:  2px;
  --tw-ring-offset-shadow:  var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:  var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color:  rgb(96 165 250 / var(--tw-ring-opacity));
  --tw-ring-opacity:  0.75;
}

.m-auto{
  margin:  auto;
}

.mt-2{
  margin-top:  0.5rem;
}

.mt-5{
  margin-top:  1.25rem;
}

.flex{
  display:  flex;
}

.inline-flex{
  display:  inline-flex;
}

.grid{
  display:  grid;
}

.h-10{
  height:  2.5rem;
}

.h-6{
  height:  1.5rem;
}

.h-60{
  height:  15rem;
}

.h-auto{
  height:  auto;
}

.w-6{
  width:  1.5rem;
}

.w-full{
  width:  100%;
}

.max-w-5xl{
  max-width:  64rem;
}

.max-w-full{
  max-width:  100%;
}

.grid-cols-3{
  grid-template-columns:  repeat(3, minmax(0, 1fr));
}

.flex-col{
  flex-direction:  column;
}

.items-center{
  align-items:  center;
}

.justify-center{
  justify-content:  center;
}

.gap-x-6{
  -moz-column-gap:  1.5rem;
       column-gap:  1.5rem;
}

.gap-y-10{
  row-gap:  2.5rem;
}

.space-x-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:  0;
  margin-right:  calc(2.5rem * var(--tw-space-x-reverse));
  margin-left:  calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.overflow-hidden{
  overflow:  hidden;
}

.rounded-lg{
  border-radius:  0.5rem;
}

.rounded-md{
  border-radius:  0.375rem;
}

.bg-\[\#bada55\]{
  --tw-bg-opacity:  1;
  background-color:  rgb(186 218 85 / var(--tw-bg-opacity));
}

.bg-indigo-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(99 102 241 / var(--tw-bg-opacity));
}

.bg-white{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-\[url\(https\:\/\/img3\.dian\.so\/lhc\/2023\/10\/09\/1170w_1806h_11C531696821195\.jpg\)\]{
  background-image:  url(https://img3.dian.so/lhc/2023/10/09/1170w_1806h_11C531696821195.jpg);
}

.bg-cover{
  background-size:  cover;
}

.bg-no-repeat{
  background-repeat:  no-repeat;
}

.p-2{
  padding:  0.5rem;
}

.px-6{
  padding-left:  1.5rem;
  padding-right:  1.5rem;
}

.py-5{
  padding-top:  1.25rem;
  padding-bottom:  1.25rem;
}

.py-8{
  padding-top:  2rem;
  padding-bottom:  2rem;
}

.pb-7{
  padding-bottom:  1.75rem;
}

.pt-44{
  padding-top:  11rem;
}

.text-center{
  text-align:  center;
}

.font-mono{
  font-family:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans{
  font-family:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif{
  font-family:  ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.text-\[22px\]{
  font-size:  22px;
}

.text-base{
  font-size:  1rem;
  line-height:  1.5rem;
}

.text-sm{
  font-size:  0.875rem;
  line-height:  1.25rem;
}

.text-xs{
  font-size:  0.75rem;
  line-height:  1rem;
}

.font-medium{
  font-weight:  500;
}

.font-normal{
  font-weight:  400;
}

.font-semibold{
  font-weight:  600;
}

.tracking-tight{
  letter-spacing:  -0.025em;
}

.text-slate-500{
  --tw-text-opacity:  1;
  color:  rgb(100 116 139 / var(--tw-text-opacity));
}

.text-slate-900{
  --tw-text-opacity:  1;
  color:  rgb(15 23 42 / var(--tw-text-opacity));
}

.text-white{
  --tw-text-opacity:  1;
  color:  rgb(255 255 255 / var(--tw-text-opacity));
}

.shadow-lg{
  --tw-shadow:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:  0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:  0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ring-1{
  --tw-ring-offset-shadow:  var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:  var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-slate-900\/5{
  --tw-ring-color:  rgb(15 23 42 / 0.05);
}

/* 您添加到base、components或utilities层的任何自定义样式，只有当这些样式实际用于HTML时，才会包含在已编译的CSS中。 */

/* 如果您想添加一些应该始终包含的自定义CSS，请在不使用@layer指令的情况下将其添加到您的样式表中： */

.const-class{
  text-align:  center;
}

.before\:content-\[\'Festivus\'\]::before{
  --tw-content:  'Festivus';
  content:  var(--tw-content);
}

@media (prefers-color-scheme: dark){
  .dark\:bg-slate-800{
    --tw-bg-opacity:  1;
    background-color:  rgb(30 41 59 / var(--tw-bg-opacity));
  }

  .dark\:text-slate-400{
    --tw-text-opacity:  1;
    color:  rgb(148 163 184 / var(--tw-text-opacity));
  }

  .dark\:text-white{
    --tw-text-opacity:  1;
    color:  rgb(255 255 255 / var(--tw-text-opacity));
  }
}

@media not all and (min-width: 640px){
  .max-sm\:grid-cols-1{
    grid-template-columns:  repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 640px){
  .sm\:grid-cols-2{
    grid-template-columns:  repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  .lg\:w-1\/2{
    width:  50%;
  }

  .lg\:grid-cols-3{
    grid-template-columns:  repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction:  row;
  }
}

@media (min-width: 1280px){
  .xl\:grid-cols-3{
    grid-template-columns:  repeat(3, minmax(0, 1fr));
  }

  .xl\:gap-x-8{
    -moz-column-gap:  2rem;
         column-gap:  2rem;
  }
}